<template>
  <view class="container">
    <view class="subject">
      <view class="subject-title">
        【 答疑 】
        <!-- <span class="subject-title-topic">(单选题)</span> -->
        <span
          class="subject-title-content"
		  v-if="analysis.content_type=='1'"
        >{{analysis.content}}</span>
		<auto-img v-else-if="analysis.content_type=='2'" :src="analysis.content_url"></auto-img>
		<video v-else-if="analysis.content_type=='3'" :src="analysis.content_url"></video>
		<audio v-else-if="analysis.content_type=='4'" :src="analysis.content_url"></audio>
      </view>
	  
      <view v-for="({answer_code,answer_content,answer_content_type,upload_url},index) in analysis.choice" :key="index" class="subject-option">
        <span class="subject-option-num">{{answer_code}}、</span>
        <span class="subject-option-text"></span>
        <text v-if="answer_content_type=='1'">{{answer_content}}</text>
		<auto-img v-else-if="answer_content_type=='2'" :src="analysis.upload_url"></auto-img>
		<video v-else-if="answer_content_type=='3'" :src="analysis.upload_url"></video>
		<audio v-else-if="answer_content_type=='4'" :src="analysis.upload_url"></audio>
      </view>
      
      <!-- <view class="subject-analysis">查看解析 ></view> -->
	  <view class="analy-two">
	  	<view class="analy-two-text">解析</view>
	  	<view class="analy-two-cont">
	  		<view class="analy-two-cont-title">本题正确答案：{{analysis.answer}}</view>
	  		<!-- {{analysis}} -->
	  		<rich-text :nodes="richContentAnalyse"></rich-text>
	  		<view>
	  			<auto-img v-if="analysis.analysis_type=='2'" :src="analysis.analysis_content_url"></auto-img>
	  			<video v-else-if="analysis.analysis_type=='3'" :src="analysis.analysis_content_url"></video>
	  			<audio v-else-if="analysis.analysis_type=='4'" :src="analysis.analysis_content_url"></audio>
	  		</view>
	  	</view>
	  </view>
    </view>

    <view class="answer">
      <h4 class="answer-h4">答疑</h4>
      <view class="answer-my">
        <view class="my-title">【 我 】</view>
        <view class="my-box">
          <view class="my-box-class">{{resultLabel}}</view>
          <view
            class="my-box-content"
          >{{analysis.question_content}}</view>
        </view>
      </view>

      <view class="answer-tec">
        <view class="tec-box">
          <view class="tec-box-content">{{analysis.reply_content}}</view>
        </view>
        <view class="tec-title">【 老师 】</view>
      </view>
    </view>
  </view>
</template>

<script>
	import MsgService from '@/services/msg';
	const msgService = new MsgService();
	//typeId getNoticeDetail
	import AutoImg from '../fragments/AutoImg';
	import {richContent} from '@/utils/index'
	export default {
		components:{
			AutoImg
		},
		data() {
			return {
				subjectId:'',
				subject:{
					analysisType:'1'
				},
				analysis:{}
			}
		},
		onLoad({subjectId,id}) {
			this.subjectId = subjectId;
			this.id = id
			this.loadData();
		},
		computed:{
			//1：错别字 2：答案与解析不匹配 3：解析有误 4：其他
			resultLabel(){
				const oo = {"1":'错别字', "2":'答案与解析不匹配', "3":'解析有误', "4":'其他'}
				return  oo[this.analysis.error_type]
			},
			richContentAnalyse(){
				return richContent(this.analysis.analysis_content)
			},
		},
		methods: {
			loadData(){
				msgService.getNoticeDetail({typeId:this.subjectId,id:this.id}).then(response=>{
					console.log('response:',response)
					if(response.success){
						this.analysis = response.result;
					}
				});
			}
		}
	};
</script>

<style lang='scss' scoped>
.container {
  background: #fff;
  padding: 40upx 20upx 0;
  font-size: 28upx;
  color: #333333;
}
.subject {
  padding: 40upx;
  margin-bottom: 60upx;
  background-color: #ffffff;
  box-shadow: 0upx 4upx 20upx 0upx rgba(153, 153, 153, 0.2);
  border-radius: 8upx;
  &-title {
    margin-bottom: 40upx;
    &-topic,
    &-content {
      color: #5ea1f8;
      margin-left: 20upx;
    }
    &-content {
      color: #333333;
    }
  }

  &-option {
    width: 630upx;
    padding: 25upx 0 25upx 20upx;
    background-color: #f4f6f8;
    border-radius: 8upx;
    margin-bottom: 40upx;
  }

  &-analysis {
    margin: 20upx 0;
    text-align: center;
    width: 100%;
    color: #5ea1f8;
  }
}
.answer {
  padding: 40upx;
  margin-bottom: 60upx;
  background-color: #ffffff;
  box-shadow: 0upx 4upx 20upx 0upx rgba(153, 153, 153, 0.2);
  border-radius: 8upx;
  &-h4 {
    margin-bottom: 45upx;
    font-size: 30upx;
  }

  .answer-my {
    display: flex;
    .my-title {
      display: inline-block;
      margin-right: 45upx;
      padding-top: 6upx;
    }
    .my-box {
      flex: 1;
      display: inline-block;
      &-class {
        padding: 10upx;
        border-radius: 8upx;
        border: solid 1upx #5ea1f8;
        font-size: 24upx;
        color: #5ea1f8;
        margin-bottom: 40upx;
        width: max-content;
      }
      &-content {
        padding: 30upx 20upx;
        // width: 456upx;
        border-radius: 8upx;
        border: solid 1upx #d8d8d8;
      }
    }
  }

  .answer-tec {
    display: flex;
    margin: 40upx 0;
    .tec-title {
      display: inline-block;
      margin-left: 45upx;
    }
    .tec-box {
      flex: 1;
      display: inline-block;
      &-content {
        padding: 30upx 20upx;
        // width: 456upx;
        border-radius: 8upx;
        border: solid 1upx #d8d8d8;
      }
    }
  }

  &-btn {
    width: 590upx;
    height: 80upx;
    line-height: 80upx;
    text-align: center;
    color: #fff;
    background-color: #5ea1f8;
    border-radius: 8upx;
    margin: 0 auto;
  }
}
</style>
